<template>
  <el-form ref="roleSearchComponentForm" :model="rolesearch" label-width="100px" :inline="true" size="small">
    <el-form-item label="角色名称" prop="roleName">
      <el-input v-model="rolesearch.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色权限" prop="perms">
      <el-input v-model="rolesearch.perms"></el-input>
    </el-form-item>
    <el-form-item label="角色状态" prop="isEnable">
      <el-select v-model="rolesearch.isEnable" placeholder="角色状态">
        <el-option label="全部" value="ALL" />
        <el-option label="启用" :value="true" />
        <el-option label="停用" :value="false" />
      </el-select>
    </el-form-item>
    <el-form-item class="btn">
      <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
      <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
  
<script>
export default {
  props: {
    rolesearch: {
      type: Object,
      required: true,
    },
  },
  methods: {
    onSearch() {
      this.$emit("onSearch");
    },
    reset() {
      this.$refs.roleSearchComponentForm.resetFields();
    },
  },
  beforeDestroy() {
    this.$refs.roleSearchComponentForm.resetFields();
  },
};
</script>
  
<style scoped lang="scss">
.el-button {
  padding-left: 25px;
  padding-right: 30px;
}

.btn {
  margin-left: 30px;
}
</style>
  